import React, {Component} from 'react';
import {View,Text,Image,ScrollView,StyleSheet,Dimensions,TouchableOpacity} from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons';

const bgImg = require('../../imgs/slides.jpg');
const img1 = require('../../imgs/1.jpg');

class MyCenter extends Component {
  constructor(props){
    super(props);
    this.state = {
      cardData: [
        {num:'0张',uname:'优惠券'},
        {num:'￥0.00',uname:'余额'},
        {num:'0张',uname:'e卡'},
        {num:'0',uname:'积分'},
      ],
      settingData: [
        {icon:<Ionicons name={'home'} size={20} color={'#6752ff'}/>, title:'常用地址'},
        {icon:<Ionicons name={'ios-heart'} size={20} color={'pink'}/>, title:'推荐有奖'},
        {icon:<Ionicons name={'gift'} size={20} color={'green'}/>, title:'积分商城'},
        {icon:<Ionicons name={'person'} size={20} color={'blue'}/>, title:'取送小e招募'},
        {icon:<Ionicons name={'logo-laravel'} size={20} color={'#999'}/>, title:'更多'},
      ]
    }
  }
  render() {
    let {cardData,settingData} = this.state;
    return (
      <ScrollView style={styles.box}>
        {/* 顶部 */}
        <View style={styles.topImgBox}>
          <Image source={bgImg} style={styles.topImg}/>
          <View style={styles.topBtnBox}>
            <View style={styles.topLoginBox}>
              <View style={styles.topHeadPhoto}>
                <Image source={img1} style={styles.topHeadPhotoImg}/>
              </View>
              <View>
                <TouchableOpacity>
                  <Text style={styles.topLogin}>立即登录</Text>
                </TouchableOpacity>
                <Text style={styles.txt}>让生活多份自在</Text>
              </View>
            </View>
            <TouchableOpacity>
              <Text style={styles.topPay}>充值 ></Text>
            </TouchableOpacity>
          </View>
        </View>

        {/* 我的钱包 */}
        <View style={styles.myWalletBox}>
          <View style={styles.iconBox}>
            <Ionicons name={'md-hand-left'} size={20} color={'orange'}/>
            <Text style={styles.myWalletTxt}>我的钱包</Text>
          </View>
          <TouchableOpacity>
            <Text style={styles.invoiceTxt}>开发票</Text>
          </TouchableOpacity>
        </View>

        {/* 优惠券、余额、e卡、积分 */}
        <View style={styles.cardBox}>
          {
            cardData.map((item,i)=>{
              return <View key={i} style={styles.cardItem}>
                <Text>{item.num}</Text>
                <Text style={styles.cardUnameTxt}>{item.uname}</Text>
              </View>
            })
          }
        </View>

        {/* 常用地址、推荐有奖、积分、小e、更多 */}
        <View style={styles.setting}>
          {
            settingData.map((item,i)=>{
              return <TouchableOpacity key={i} style={styles.settingItem}>
                <View style={styles.settingLeft}>
                  {item.icon}
                  <Text style={styles.settingLeftTxt}>{item.title}</Text>
                </View>
                <Text>></Text>
              </TouchableOpacity>
            })
          }
        </View>

        {/* 客服电话 */}
        <TouchableOpacity style={styles.servicePhoneBox}>
          <Ionicons name={'megaphone'} size={20} color={'#51caff'}/>
          <Text style={styles.servicePhoneTxt}>客服电话</Text>
        </TouchableOpacity>
      </ScrollView>
    );
  }
}

const screenW = Dimensions.get('window').width;
const styles = StyleSheet.create({
  box:{
    backgroundColor:'#ebf0ff',
  },
  txt:{
    color:'#fff'
  },

  // 顶部
  topImgBox:{
    width:screenW,
    height:screenW*0.5,
    position:'relative',
  },
  topImg:{
    width:'100%',
    height:'100%',
  },
  topBtnBox:{
    padding:5,
    position:'absolute',
    width:'95%',
    left:'5%',
    top:'20%',
    display:'flex',
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  topLoginBox:{
    flexDirection:'row',
    alignItems:'center',
  },
  topHeadPhoto:{
    width:70,
    height:70,
    borderRadius: 35,
    borderWidth:1,
    borderColor:'#91b8ff',
    justifyContent:'center',
    alignItems:'center',
  },
  topHeadPhotoImg:{
    width:'90%',
    height:'90%',
    borderRadius: 35,
  },
  topLogin:{
    color:'#fff',
    fontSize:25,
    marginBottom:20,
  },
  topPay:{
    color:'red'
  },

  // 我的钱包
  myWalletBox:{
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding:10,
    backgroundColor: '#fff',
    borderBottomWidth:1,
    borderBottomColor:'#ddd',
    alignItems: 'center'
  },
  iconBox:{
    flexDirection:'row',
    alignItems: 'center'
  },
  myWalletTxt:{
    color:'#999',
    marginLeft:10,
  },
  invoiceTxt:{
    color:'#999',
  },

  // 优惠券、余额、e卡、积分
  cardBox:{
    backgroundColor:'#fff',
    flexDirection:'row',
  },
  cardItem:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    padding:10,
  },
  cardUnameTxt:{
    color:'#999'
  },

  // 常用地址、推荐有奖、积分、小e、更多
  setting:{
    backgroundColor:"#fff",
    marginTop:10,
  },
  settingItem:{
    flexDirection:'row',
    justifyContent:'space-between',
    padding:10,
    borderBottomWidth:1,
    borderBottomColor:'#eee',
  },
  settingLeft:{
    flexDirection:'row',
  },
  settingLeftTxt:{
    marginLeft: 10,
  },

  // 客服电话
  servicePhoneBox:{
    flexDirection:'row',
    justifyContent:'center',
    backgroundColor:'#fff',
    padding:10,
  },
  servicePhoneTxt:{
    marginLeft:10,
    fontSize: 14,
    color:'#333',
  }

});

export default MyCenter;